<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>禅师的足迹</title>
		<meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="email=no">
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/mui.min.css">

		<link href="css/mystrap.css" rel="stylesheet" type="text/css" />

	</head>

	<style type="text/css">
		body {
			margin-bottom: 60px !important;
			background: #F9F7EC;
		}
		
		a,
		button,
		input {
			-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
		}
		
		ul,
		li {
			list-style: none;
			margin: 0;
			padding: 0
		}
		
		.top_bar {
			position: fixed;
			z-index: 900;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			font-family: Helvetica, Tahoma, Arial, Microsoft YaHei, sans-serif;
		}
		
		.top_menu {
			display: -webkit-box;
			border-top: 1px solid #b3b3b3;
			display: block;
			width: 100%;
			background: rgba(255, 255, 255, 0.7);
			height: 48px;
			display: -webkit-box;
			display: box;
			margin: 0;
			padding: 0;
			-webkit-box-orient: horizontal;
			background: #F9F7EC;
		}
		
		.top_bar .top_menu>li {
			-webkit-box-flex: 1;
			background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
			-webkit-background-size: 1px 100%, 1px 100%;
			background-size: 1px 100%, 1px 100%;
			background-position: 1px center, 2px center;
			background-repeat: no-repeat;
			position: relative;
			text-align: center;
		}
		
		.top_menu>li:first-child {
			background: none;
		}
		
		.top_bar .top_menu>li>a {
			height: 48px;
			line-height: 48px;
			display: block;
			text-align: center;
			color: #4f4d4f;
			text-shadow: 0 1px rgba(255, 255, 255, 0.3);
			text-decoration: none;
			border-top: 1px solid #f9f9f9;
			-webkit-box-flex: 1;
		}
		
		.top_bar .top_menu>li>a label {
			overflow: hidden;
			margin: 0 0 0 0;
			font-size: 12px;
			display: block !important;
			line-height: 18px;
			text-align: center;
			color: #FFFFFF;
		}
		
		.top_bar .top_menu>li>a img {
			margin: 2px 0 0 0;
			height: 24px;
			width: 24px;
			color: #FFFFFF;
			line-height: 48px;
			vertical-align: middle;
		}
		
		.top_bar li:first-child a {
			display: block;
		}
	</style>

	<body>
		<script src="js/mui.min.js"></script>
		<script>
			// 监听tap事件，解决 a标签 不能跳转页面问题
			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});
		</script>

		<header class="mui-bar mui-bar-nav" style="background: #F9F7EC;">
			<a href="index.html#offCanvasSide" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color:#000000"></a>

			<h1 class="mui-title">禅师的足迹（点击红色地标）</h1>
		</header>
		<div class="mui-content" style="background: #FFFFFF;">
			<ul class="mui-table-view mui-grid-view" style="background: #F9F7EC;">
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="xzmap.html">
						<img src="images/xz2.jpg" width="300" height="300">
						<div class="mui-media-body">玄奘大师足迹</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="kqmap.html">
						<img src="images/kq.jpg" width="300" height="300">
						<div class="mui-media-body">克勤圆悟禅师足迹</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="dhmap.html"><img src="images/dh.jpg" width="300" height="300">>
						<div class="mui-media-body">大慧宗杲禅师足迹</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="scmap.html">
						<img src="images/sc.jpg" width="300" height="300">
						<div class="mui-media-body">三祖僧璨足迹</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="zzmap.html">
						<img src="images/zz.jpg" width="300" height="300">
						<div class="mui-media-body">赵州禅师足迹</div>
					</a>
				</li>
               <li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="czmap.html">
						<img src="images/dm.jpg" width="300" height="300">
						<div class="mui-media-body">禅宗各宗分布图</div>
					</a>
				</li>
               <li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="njmap.html">
						<img src="images/dm.jpg" width="300" height="300">
						<div class="mui-media-body">南京寺院地图</div>
					</a>
				</li>
			</ul>

		</div>

		<script src="js/mui.min.js"></script>

	</body>

</html>